<template>
    <view class="personal_container">
        <view class="header flex">
            <block v-if="!userInfo.nickname">
                <view class="avatar">
                    <image
                        src="/static/images/personal/avatar.png"
                        mode="scaleToFill" />
                </view>
                <view class="login" @click="toLogin">立即登录</view>             
            </block>
            <block v-else>
                <view class="avatar">
                    <image
                        :src="userInfo.avatar"
                        mode="scaleToFill" />
                </view>
                <!-- <view class="login" @click="toLogin">立即登录</view>              -->
                <view class="userName login">{{ userInfo.nickname }}</view>
            </block>
        </view>

        <view class="orderTab flex">
            <view class="orderTab_left flex_c">
                <view class="ticketsNum">0张</view>
                <view class="ticketsTitle">卖座券</view>
            </view>
            <view class="orderTab_right flex_c">
                <view class="balance">￥0</view>
                <view class="balanceTitle">余额</view>
            </view>
        </view>

        <view class="list">
            <van-cell title="电影订单" icon="coupon-o" is-link url="https://github.com" />
            <van-cell title="组合红包" icon="after-sale" is-link url="https://github.com" />
            <van-cell title="帮助与客服" icon="friends-o" is-link url="https://github.com" />
            <van-cell title="设置" icon="setting-o" is-link url="https://github.com" />
        </view>

        <view class="logout" @click="handleLogout">退出登录</view>
    </view>
</template>

<script setup lang="ts">
import { onLoad,onShow } from '@dcloudio/uni-app';
import {reactive} from 'vue'
import {userModel} from '@/store/user'
import userService from '@/api/user'
const userStore = userModel()

//定义响应式数据
const userInfo = reactive({
    nickname:'',
    avatar:''
})

//生命周期函数
onShow(() => {
    //判断用户是否登录
    if(uni.getStorageSync('token')){
        //判断有没有个人信息
        if(userStore.userInfo.nickname){
            userInfo.avatar = userStore.userInfo.avatar;
            userInfo.nickname = userStore.userInfo.nickname
        }else{
            //获取个人信息
            getUserInfo()
        }
    }
   
})

//自定义事件的功能函数
// 获取个人信息
async function getUserInfo(){
    try {
        let result = await userService.getUserInfo()
        //更新用户信息
        if(result.code === 200){
            userStore.saveUserInfo(result.data.item)
            userInfo.avatar = userStore.userInfo.avatar;
            userInfo.nickname = userStore.userInfo.nickname
        }
    } catch (error) {
        console.log(error)
    }
}
//事件的回调
//退出登录的回调
function handleLogout(){
    // 清除token
    uni.removeStorageSync('token')
    // 清除store用户信息
    userStore.clearUserInfo()
    // 清除页面信息
    userInfo.nickname = ''
    userInfo.avatar = ''
   
}
//去登录的回调
function toLogin(){
    //跳转登录页
    uni.navigateTo({
        url:'/pages/login/index'
    })
}
</script>

<style lang="less" scoped>
.personal_container {
    height: 1155rpx;
    background: #eee;
    position: relative;

    .header {
        height: 360rpx;
        margin-top: -44rpx;
        padding-top: 20rpx;
        padding-left: 40rpx;
        background: url('https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png');
        align-items: center;

        .avatar {
            image {
                width: 134rpx;
                height: 134rpx;
                border-radius: 50%;
            }
        }

        .login {
            margin-left: 40rpx;
            color: #fff;
            font-size: 32rpx;
        }
    }

    .orderTab {
        background: #fff;
        height: 158rpx;
        width: 100%;
        justify-content: space-around;
        align-items: center;

        .orderTab_left {
            align-items: center;

            .ticketsNum {
                font-size: 34rpx;
            }

            .ticketsTitle {
                font-size: 26rpx;
                color: #797d82;
            }
        }

        .orderTab_right {
            .balance {
                font-size: 34rpx;
            }

            .balanceTitle {
                font-size: 26rpx;
                color: #797d82;
            }
        }
    }

    .list {
        box-sizing: border-box;
        width: 100%;
        height: 98rpx;
        margin-top: 20rpx;
        background: #fff;

        // .van-cell {
        //     width: 100%;
        // }

    }

    .logout {
        width: 100%;
        height: 100rpx;
        color: orange;
        text-align: center;
        line-height: 100rpx;
        background: #fff;
        position: absolute;
        bottom: 120rpx;
    }

}
</style>